<template>
  <div style="width:100%">
    <div class="main-rigt">
      <div class="main-header">
        <div class="header-left">
          <SearchInput />
        </div>
        <div class="header-right">
          <span
            :class="classIndex == 0 ? 'spanActive' : ''"
            @click="calssTab(0)"
            >推荐</span
          >
          <span
            :class="classIndex == 1 ? 'spanActive' : ''"
            @click="calssTab(1)"
            >精益管理</span
          >
          <span
            :class="classIndex == 2 ? 'spanActive' : ''"
            @click="calssTab(2)"
            >仓储物流</span
          >
          <span
            :class="classIndex == 3 ? 'spanActive' : ''"
            @click="calssTab(3)"
            >参观宣传</span
          >
          <span
            :class="classIndex == 4 ? 'spanActive' : ''"
            @click="calssTab(4)"
            >质量管理</span
          >
        </div>
      </div>
      <div class="main-page">
        <div class="page-item new-btn" @click="addProject">
          <div>
            <i
              class="el-icon-circle-plus"
              :style="{
                fontSize: '34px',
                color: '#eee',
                marginBottom: '25px',
              }"
            ></i>
            <p>您可以根据业务需要创建模板项目</p>
            <p>或者选择对应的模板直接创建</p>
          </div>
        </div>
        <div
          class="page-item"
          v-for="(item, index) in 10"
          :key="index"
          @click="editPage"
        >
          <div class="img-box">
            <img src="../../../assets/demo.png" alt="" srcset="" />
          </div>
          <div class="name-box">项目名称</div>
        </div>
      </div>
    </div>
    <el-dialog title="新建项目" :visible.sync="addProjectVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          label="项目名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="项目类型"
          :label-width="formLabelWidth"
          prop="region"
        >
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select v-model="form.resource" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择位置" :label-width="formLabelWidth">
          <el-input v-model="form.desc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProjectVisible = false">取 消</el-button>
        <el-button type="primary" @click="goAddPro">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SearchInput from "@/components/SearchInput";
export default {
  components: {
    SearchInput,
  },
  data() {
    return {
      search: "", // 搜索
      projectIndex: 0,
      classIndex: 0,
      pageList: [
        {
          pageId: "PG1662434086938",
        },
        {
          pageId: "PG1662434086932",
        },
        {
          pageId: "PG1662434086930",
        },
      ],
      addProjectVisible: false,
      formLabelWidth: "120px",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择项目类型", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    calssTab(index) {
      this.classIndex = index;
    },
    viewPage(item) {
      this.$router.push({
        name: "View",
        query: {
          pageId: item.pageId,
        },
      });
    },
    editPage() {
      this.$router.push({
        name: "Preview",
      });
    },
    //新建项目
    addProject() {
      this.addProjectVisible = true;
    },
    goAddPro() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$router.push("Design");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.main-rigt {
  flex: 1;
  min-width: 486px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .main-header {
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;

    .header-left {
      width: 25%;
    }

    .header-right {
      flex: 1;
      text-align: right;

      span {
        padding: 3px 12px;
        margin-left: 10px;
        width: 120px;
        cursor: pointer;
        color: var(--font-color);
      }

      .spanActive {
        background: var(--tabNav-background);
        border-radius: 2px;
        color: #fff;
      }
    }
  }

  .main-page {
    width: 100%;
    flex: 1;
    padding: 0 16px;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 200px);
    // grid-template-columns: min-content;
    gap: 16px;
    grid-template-rows: repeat(auto-fill, 160px);

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.new-btn {
  // width:400px !important;
  margin-right: 20px;
  background: #d9dfe6 !important;
  border: 1px dashed red;
  text-align: center;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-item {
  position: relative;
  width: 200px;
  height: 160px;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--page-background);
  box-shadow: rgb(0 0 0 / 8%) 0px 2px 4px 0px;

  .img-box {
    width: 100%;
    height: 120px;
    border-radius: 8px 8px 0 0;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .name-box {
    width: 100%;
    height: 40px;
    border-radius: 8px 8px 0 0;
    line-height: 40px;
    text-align: center;
    color: var(--font-color);
  }
}
</style>
